﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>users</title>
    <script src="~/lib/axios/dist/axios.js"></script>
    <script src="~/lib/vue/dist/vue.js"></script>
    <script src="~/lib/element-ui/lib/index.js"></script>
    <link href="~/lib/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <el-container>
            <el-main>
                <el-form ref="form" :model="form" :rules="formrules" label-width="80px">
                    <div class="fis"><h1>人力资源管理</h1></div>
                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input placeholder="请输入密码"
                                  v-model="form.pass"
                                  show-password></el-input>
                    </el-form-item>
                    <el-form-item class="juo">
                        <el-button type="primary" @@click="onSubmit('form')">登录</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                form: {
                    name: "",
                    pass: ""
                },
                formrules: {
                    name: [
                        { required: true, message: '请填写账号', trigger: 'blur' },
                    ],
                    pass: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                    ],
                }
            },
            methods: {
                onSubmit(formName) {
                    //表单验证
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            //登录查询
                            axios.get('/users/UseAll', {
                                params: {
                                    name: this.form.name,
                                    pwd: this.form.pass,
                                }
                            })
                                .then(res => {
                                    window.localStorage.setItem("token", res.data.Token);
                                    if (res.data.Token != null) {
                                        this.$message({
                                            message: "登录成功",
                                            type: "success",
                                        });
                                        location.href = "/Home/Index/";
                                    } else {
                                        this.$message({
                                            message: "登录失败",
                                            type: "error",
                                        });
                                    }
                                    console.info(res);
                                })
                                .catch(err => {
                                    this.$message({
                                        message: "账号密码错误!",
                                        type: "error",
                                    });
                                    console.info(err);
                                })
                        }
                    });
                 
                }
            }
        });
    </script>
    <style scoped>
        .fis {
            border-bottom: solid white 3px;
            margin-bottom: 40px;
            padding-right: 30px;
            margin-right: -35px;
        }

        .el-form {
            width: 500px;
            height: 350px;
            transform: translate(90%, 50%);
            border: solid white 1px;
            background-color: rgba(255, 255, 255, 0.5);
            padding-right: 35px;
            border-radius: 10px;
        }

        .el-main {
            width: 100%;
            height: 100%;
            background-image: url('../../img/R-C.png');
            background-size: cover;
            background-position: center;
            position: relative;
            color: rgb(51, 51, 51);
            text-align: center;
            overflow: hidden;
            height: 737px;
        }

        .juo {
            margin-left: -40px;
        }

        h1 {
            color: white;
        }
    </style>
</body>
</html>
